<template>
  <div class="viewBox">
    <div class="view_title">
      <div class="text-16px">销售排名</div>
    </div>
    <ul class="rankList" v-if="dataList.length">
      <li class="header flex justify-between color-#999">
        <span
          v-for="(item, index) in dataName"
          :key="index"
          class="font-semibold text-13px w-1.5/10 text-center"
          :class="{
            ['w-1/4 mr-0.25/10']: item.key === 'saleMount',
            ['w-1.75/10']: item.key === 'nickName',
            ['w-2/5  text-center']: item.key === 'schedule'
          }"
        >
          {{ item.value }}</span
        >
      </li>
      <li
        v-for="(item, index) in dataList"
        :key="item.rank"
        class="liBox"
        :class="{
          liBorder: index !== dataList.length - 1
        }"
      >
        <template v-for="(v, n) in dataName" :key="n">
          <div
            v-if="v.key !== 'schedule'"
            :class="{
              ['w-1/4 mr-0.25/10']: v.key === 'saleMount',
              ['w-1.75/10']: v.key === 'nickName',
              ['w-1.5/10']: v.key === 'rank'
            }"
            class="text-center"
          >
            <span
              :class="{
                grey: v.key === 'rank',
                orange: v.key === 'rank' && item[v.key] <= 3
              }"
              class="inline-block"
            >
              {{ item[v.key] }}
            </span>
          </div>
          <div class="w2/5 text-center inline-block" v-else>
            <el-progress
              :percentage="Number(item.schedule)"
              :color="rankNum(item.rank)"
            >
              <template #default="{ percentage }">
                <div>{{ percentage || 0 }}%</div>
              </template>
            </el-progress>
          </div>
        </template>
      </li>
    </ul>
    <ul class="rankList" v-else style="height: 360px">
      <li>
        <el-empty></el-empty>
      </li>
    </ul>
  </div>
</template>

<script setup name="salesRanking">
import { getSalesRanking } from '@/api/homePage'

const dataName = [
  { key: 'rank', value: '排名' },
  { key: 'nickName', value: '姓名' },
  { key: 'saleMount', value: '销售金额' },
  { key: 'schedule', value: '完成目标' }
]
const dataList = ref([])
async function init() {
  const datas = await getSalesRanking()
  if (datas.code === 200) {
    dataList.value = datas.data.map((v, i) => {
      v.rank = i + 1
      v.saleMount = toTransform(v.saleMount)
      return v
    })
  }
}

/**
 *  数值转换
 *  @param {String} num
 * */

function toTransform(num) {
  let result = num.replace(/\.[\d]+/, '')
  result = result / 10000
  return result ? result.toFixed(2) + '万元' : '0'
}
init()

// 排名颜色
function rankNum(index) {
  let color = ''
  if (index === 1) {
    color = 'rgb(251,98,96)'
  } else if (index === 2) {
    color = 'rgb(255,169,76)'
  } else if (index === 3) {
    color = 'rgb(75,206,208)'
  }
  return color
}
</script>

<style scoped lang="scss">
.viewBox {
  margin-bottom: 20px;
  .view_title {
    background-color: rgba(249, 249, 249, 1);
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid rgba(223, 220, 220, 0.8);
    font-family: '微软雅黑 Bold';
    font-weight: 600;
  }
  .title {
    background-color: #126bae;
    color: white;
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .rankList {
    @apply mt-0 px-20px pb-10px pt-20px color-#7a7676 text-13px;
    border: 1px solid rgba(216, 207, 207, 0.5);
    border-top: 0;
    // border-bottom-left-radius: 10px;
    // border-bottom-right-radius: 10px;
    li {
      list-style: none;
    }
    .liBox {
      @apply flex my-10px h-40px items-center;
    }
    .liBorder {
      border-bottom: 1px solid rgba(209, 209, 209, 0.7);
    }
  }

  .grey {
    @apply w-25px h-25px color-white bg-#ccc text-center;
    border-radius: 5px;
    line-height: 25px;
    font-weight: 600;
    font-family: '微软雅黑 Bold';
    font-weight: 600;
  }
  .orange {
    @apply bg-orange;
  }
}
:deep(.el-progress-bar__outer) {
  height: 8px !important;
}
:deep(.el-progress__text) {
  position: relative;
  height: 12px;
}
:deep(.el-progress__text span) {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
